<style>
.wrapper03 {position:relative;height: 1rem;width: 100%;overflow: hidden;margin:0 auto;border-bottom:1px solid #ccc}
    .wrapper03 .scroller {position:absolute}
    .wrapper03 .scroller li {height: 1rem;color:#333;float: left;line-height: 1rem;font-size: .4rem;text-align: center}
    .wrapper03 .scroller li a{color:#333;display:block;padding:0 .1rem}
    .wrapper03 .scroller li.cur a{color:#1cbb9b;height:.9rem;border-bottom:.1rem solid #1cbb9b}
.sublist li {float:left;margin-right:20px;margin-top:5px;width:80px;}
</style>
<div class="home-cate" id="home_cate_<{$widgets_id}>">
    <div class="title">
    精品分类
        <a href="<{link app=b2c ctl=wap_gallery act=cat}>" class="more">查看所有分类<i class="arr right"></i>
        </a>
    </div>
    <div class="wrapper wrapper03" id="wrapper03">
    <div class="content scroller" style="margin-bottom:30px;" id="navlist">
        <ul class="clearfix">
        <{foreach from=$data item=cat0 key=key1}>
            <li style="float:left;" ><a href="#" style="margin-right:20px;" id="<{$key1}>"><{$cat0.title}></a>
            </li>
        <{/foreach}>
        </ul>
    </div>
    </div>
    <div class="box" id="navbox">
        <div class="cont">
            <{foreach from=$data item=cat0 key=key2}>
                <ul class="sublist clearfix" id="show_<{$key2}>" style="display:none;">
                <{foreach from=$cat0.items name=name item=cat1}>
                <li>
                <a href="<{$cat1.link}>"><{$cat1.title}></a>
                </li>
                <{/foreach}>
                </ul>
            <{/foreach}>
        </div>
    </div>
</div>
<script type="text/javascript">
$j(function(){
    $j('.wrapper').navbarscroll();
    var list = $j("#navlist");
    var lista = list.find("a");
    lista.click(function(){
        var id = $j(this).attr('id');
        $j('.sublist').hide();
        $j('#show_'+id).show();
    });
});
</script>
